<template>

  <div class="homeBox">
    <!--<p>我是首页{{message}}</p>-->
    <div id="big_zhezhao" v-show="allTanchuang">
      <div class="fenqimingxi">
        <div class="fenqimingxi_top">
          <p>分期明细</p>
        </div>
        <ul class="topUls">
          <li>
            <p>分期金额</p>
            <p>￥<span id="fenqijine">{{fenqijine}}</span></p>
          </li>
          <li>
            <p>分期期数</p>
            <p id="periodTime">{{periodTime}}</p>
          </li>
        </ul>
        <div class="fenqimingxiList">
          <ul>
            <li>
              <p>期数</p>
              <p>还款日期</p>
              <p>还款金额</p>
            </li>
            <li>
              <p>第1期</p>
              <p id="huankuanriqi">{{arriveTime}}</p>
              <p>￥<span id="diyizhou">{{diyizhou}}</span></p>
            </li>
          </ul>

        </div>

        <div class="iknow">
          <button id="iKnow" @click="iKnow()">我知道了</button>
        </div>
      </div>
    </div>


    <!--借款用途-->
    <div id="jiekuanyongtu" v-show="jiekuanyongtutanchuang">
      <div class="valueWrap" v-show="valueWrap">
        <div class="fenqimingxi">
          <div class="fenqimingxiListzuoyong">
            <ul>
              <li v-for='(item,index) in purpose[0]' @click="getValue(index)" ref="getvalue">
                {{item}}
              </li>
            </ul>
          </div>

        </div>
        <!--取消-->
        <div class="quxiaoUls" @click="remove()">
          <ul>
            <li>取消</li>
          </ul>
        </div>
      </div>
    </div>

    <div id="shouye">
      <div class="shouyeTop">
        <div class="titles"><p @click="other()">取点花</p></div>
        <div class="bgImg">
          <div class="bgImg_imgs">
            <img src="../assets/bgImg.png" alt="" onclick="return false">
          </div>
          <div class="jindujine">
            <p>提现额度(元)</p>
            <p id="bigNum" ref="bigNum">{{audit_amount}}</p>
          </div>
          <div class="jiajian">
            <img src="../assets/jianjian.png" alt="" @click="jianMoney()">
            <button id="shengqinglinshiMoney" @click="temporaryLimit()" v-show="limitShow">申请临时额度</button>
            <img src="../assets/jiajia.png" alt="" @click="addMoney()">
          </div>
        </div>

      </div>

      <div class="kuaijiexuanze">
        <div class="borwer">
          <p><span style="display: inline-block;font-size: 1.4rem">快捷选择</span></p>
        </div>
        <ul class="kuaijiexuanze_jie" id="kuaijiexuanze_jie">
          <li v-for='(item,index) in quick_choice[0]' @click="changeColor(index)"
              v-bind:class='{changes:changeRed == index}'>￥<span @click="getQuickMoney(index)"
                                                                 ref="menuItem">{{item}}</span></li>
        </ul>

        <ul class="kuaijiexuanze_server">
          <li id="jiekuanTime"><p>借款期限</p> <span id="typeTime">{{typeTime}}</span></li>
          <li id="meiqihuankuan" @click="meiqihuankuan()"><p>每期还款</p><span><span
            style="color: #000000;display:inline-block; margin-right: 0.2rem">￥</span><span
            id="meiqihuankuanjine" style="margin-right: 0.5rem;color:#000000">{{meiqihuankuanjine}}</span>(含服务费：￥<span
            id="fuwufei" style="margin-right: 0.2rem">{{fuwufei}}</span>)<img
            src="../assets/gengduo.png" alt="" style="width: 1.2rem;height: 1.2rem"></span>
          </li>
          <li id="useMethods" style="overflow: hidden" @click="jiekuanyongtu()"><p>借款用途</p><span id="pleaseChoose"
                                                                                                 style="position: relative;left: 3rem;text-align: right"><input
            v-model="getvalue"
            type="text" placeholder="请选择" value="" style="text-align: right;border: 0;background: white;
outline: none;position: relative;right: 0.5rem" disabled="disabled"></span> <img src="../assets/gengduo.png" alt=""
                                                                                 style="width: 1.2rem;height: 1.2rem;float: right;position: relative;left: 1rem;">
          </li>
        </ul>
        <div class="kuaijiexuanze_xieyi">
          <p>
            <input type="checkbox" id="checkBox" name="checkBox" v-model="status" @click="checkStatus()">
            <label for="checkbox" v-show="false">{{status}}</label>
            <!--<img src="img/mine.png" alt="">-->
            <span style="color: #A1A1A1;font-size: 1.4rem">我已同意</span> <a id="qudianhuaxieyi" style="font-size: 1.4rem"
                                                                          @click="agreement()">《取点花分期服务协议》</a>
          </p>

        </div>
        <div class="kuaijiexuanze_button">
          <button id="liketixianBtn" @click="clickIndexBtn()">立刻提现</button>
        </div>
      </div>


      <div class="tishiAgree" v-show="tishiShow">
        <p>{{tishiInfor}}</p>
      </div>

      <!--是否认证-->
      <div class="isRenzhengWrap0" v-show="isRenzhengWrap0">
        <div class="isRenzheng0">
          <p>您还没有认证信息，是否认证?</p>
          <ul>
            <li class="renzhengquxiao0" @click="renzhengxinxiquxiao()">取消</li>
            <li class="quRenzheng0" @click="quRenzhengxinxi()">去认证</li>
          </ul>
        </div>
      </div>


      <!--是否认证地址-->
      <div class="isRenzhengWrapId" v-show="isRenzhengWrapId">
        <div class="isRenzhengId">
          <p>您还没有认证地址，是否认证?</p>
          <ul>
            <li class="renzhengquxiaoId" @click="renzhengAdderssquxiao()">取消</li>
            <li class="quRenzhengId" @click="renzhengAddress()">去认证</li>
          </ul>
        </div>
      </div>

      <!--是否设置交易密码-->
      <div class="isRenzhengjiaoyiWrap" v-show="isRenzhengjiaoyiWrap">
        <div class="isRenzhengjiaoyi">
          <p>您还没有设置交易密码，请设置密码</p>
          <ul>
            <li class="renzhengjiaoyiquxiao" @click="renzhengJiaoyimimaquxiao()">取消</li>
            <li class="quRenzhengjiaoyi" @click="setJiaoyimima()">去设置</li>
          </ul>
        </div>
      </div>
      <!--是否绑定银行卡-->
      <div class="isRenzhengbankCardWrap" v-show="isRenzhengbankCardWrap">
        <div class="isRenzhengbankCard">
          <p>您还没有绑定银行卡，是否去绑定?</p>
          <ul>
            <li class="bankCardquxiao" @click="quxiaoBindBankCard()">取消</li>
            <li class="bankCardquRenzheng" @click="BindBankCard()">去绑定</li>
          </ul>
        </div>
      </div>


      <!--支付密码错误-->
      <div class="payWrongWrap">
        <div class="payWrong">
          <p></p>
          <ul>
            <li class="payWrongQuxiao">取消</li>
            <li class="reInput">重新输入</li>
          </ul>
        </div>
      </div>


      <div class="code2007">
        <div class="code200702">
          <p></p>
          <ul>
            <li onclick="end()">确定</li>
          </ul>
        </div>
      </div>


      <!--分期范围必须在500-10000之间-->
      <div class="moneyLimit">
        <div class="moneylimit">
          <p></p>
          <ul>
            <li onclick="sure()">确定</li>
          </ul>
        </div>
      </div>

      <!--提现输入密码框-->
      <div class="bankInforWraps" v-show="tixianInput">
        <div id="tixianNumber">
          <p class="content">请输入交易密码 <span @click="closeInfor()">×</span></p>
          <div class="tixianBankInfor">
            <p>提现金额将转入</p>
            <div class="tixianBankInfor_infor">
              <div style="font-size: 1.4rem;padding-left: 1rem"><span style="display: none" id="bank_card_id"></span><img :src="card_img" alt="" style="border: 0;outline: none"
                                                              id="indexBankImg">
                <p id="bankMarkInfor" @click="getBankList()"><span id="indexBankName">{{bank_name}}</span><span
                  id="indexBankCard">{{bank_code}}</span></p></div>
            </div>
          </div>
          <div class="tishiAgree" v-show="tishiShow">
            <p style="width: 85%">{{tishiInfor}}</p>
          </div>
          <!--首页交易密码框-->
          <div id="bgs">
            <div class="pay-tool">
              <div class="pay-tool-content">
                <div class="pay-tool-inputs">
                  <div class="item" v-for="i in items"><span class="icon_dot" v-if="password[i]"></span></div>
                </div>

              </div>

              <div class="pay-tool-keyboard" v-show="paytoolkeyboard">
                <ul>
                  <li @click="keyUpHandle($event)" v-for="val in keys">
                    {{ val }}
                  </li>
                  <li class="del" @click="delHandle"><span class="icon-del" style="color: #528CE0">删除</span></li>
                </ul>
              </div>

            </div>
            <div class="forgetNum">
              <router-link class="link" to="/resetpaynum"><p>忘记密码？</p></router-link>
            </div>
          </div>


        </div>
      </div>


      <div id="bindBank" v-show="bindBank">
        <div class="backWrap">
          <!--银行卡-->
          <div class="bankImg">
            <!--银行卡信息-->
            <div class="bankInfors">
              <ul v-for="(item,index) in bankArr[0]" @click="getBankInfor(index)">
                <li><span v-show="false" ref="menuId">{{item.bank_card_id}}</span><img :src="item.card_img" alt="" ref="menuImg"><p ref="menuName" style=" overflow: hidden; white-space: nowrap;text-overflow: ellipsis;margin-left: 1rem">{{item.bank_name}}</p><span style=" overflow: hidden; white-space: nowrap;text-overflow: ellipsis">【{{item.card_type}}】</span></li>
                <li><p ref="menuCode">{{item.bank_code}}</p></li>
              </ul>
            </div>
            <!--添加银行卡-->
          </div>
          <div class="bankAdd">
            <img src="../assets/bank_add.png" alt="" @click="addBandCard()">
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import axios from 'axios'
  import store from "../store/store"

  var qs = require("qs");
  axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded";
  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0];

  export default {
    name: 'first',
    data() {
      return {
        AuthTokenIndex: '',
        audit_amount: '',
        quick_choice: [],
        purpose: [],
        arriveTime: '',
        periodTime: '',
        typeTime: '',
        fenqitype: '',
        diyizhou: '',
        types: [],
        meiqihuankuanjine: '',
        fuwufei: '',
        fenqijine: '',
        allTanchuang: false,
        jiekuanyongtutanchuang: false,
        fenqitanchuang: false,
        yongtutanchuang: false,
        getvalue: '',
        valueWrap: '',
        changeRed: -1,
        status: false,
        tishiShow: false,
        tishiInfor: '',
        is_credit: '',
        is_address: '',
        is_pay_pwd: '',
        is_bank: '',
        isRenzhengWrap0: false,
        isRenzhengWrapId: false,
        isRenzhengbankCardWrap: false,
        isRenzhengjiaoyiWrap: false,
        bindBank: false,
        // 银行卡信息
        bankArr: [],
        bank_code: '',
        bank_name: '',
        card_img: '',
        bank_card_id: '',
        phoneModel: '',
        tixianInput: false,
        // 输入密码
        items: [0, 1, 2, 3, 4, 5],
        keys: keys(),
        password: [],
        pwds: '',
        paytoolkeyboard: true,
        // 首页最大可提额度
        indexLimit:'',
        // 申请临时额度
        applystatus:'',
        limitShow:true,



      }
    },
    methods: {

      // 申请临时额度
      temporaryLimit() {
        this.$router.push({path: '/temporaryLimit'})
      },
      agreement() {
        this.$router.push({path: '/agreement'})
      },
      keyUpHandle(e) {
        let text = e.currentTarget.innerText;
        let len = this.password.length;
        if (!text || len >= 6)
          this.clearPasswordHandle()
        this.password.push(text)
        this.ajaxData();
      },
      delHandle() {
        if (this.password.length <= 0) return false
        this.password.shift()
      },
      ajaxData() {
        if (this.password.length >= 6) {
          // console.log(parseInt(this.password.join(' ').replace(/\s/g, '')))
          var pwds = parseInt(this.password.join(' ').replace(/\s/g, ''))
          this.pwds = pwds;
          console.log(pwds);
          if (this.password == '') {
            // alert('密码不能为空');
            this.tishiShow = true;
            this.tishiInfor = '密码不能为空';
            var _that = this;
            window.setTimeout(function () {
              _that.tishiShow = false
            }, 1500);
          } else {
            var that = this;
            axios.post('http://test.zjapi.xianxiangle.com/verify_pay_psw',
              {
                AuthToken: that.AuthTokenIndex,
                pay_passwd: that.pwds
              }
            ).then(function (res) {
              console.log(res.data.code);
              if (res.data.code == 0) {
                // 验证密码后提现
                axios.post('http://test.zjapi.xianxiangle.com/cash_apply',
                  {
                    AuthToken: that.AuthTokenIndex,
                    amount: parseInt(that.audit_amount),  //分期金额
                    fenqi_num: that.typeValue,  //分期数
                    fenqi_type: that.fenqitype,  //分期类型 [week, month]
                    pay_passwd: that.pwds,//支付密码
                    payment_id: that.bank_card_id,// (integer) 支付方式id
                    payment_type: 2, //(integer) 用户收款账号渠道 1支付宝 2银行
                    purpose: that.getvalue,  //借款用途
                    device_model: that.phoneModel, //(string) 设备型号
                  }
                ).then(function (res) {
                  console.log(res.data)
                  that.tishiShow = true;
                  that.tishiInfor = res.data.message;
                  window.setTimeout(function () {
                    that.password = []
                    that.tishiShow = false
                    that.tixianInput = false
                  }, 1500);
                }).catch(function (err) {
                })
              } else {
                that.tishiShow = true;
                that.tishiInfor = res.data.message;
                window.setTimeout(function () {
                  that.password = []
                  that.tishiShow = false
                }, 1500);
              }
            }).catch(function (err) {

            })

          }
          // this.paytoolkeyboard=false
        }
        // return false
      },
      clearPasswordHandle: function () {
        this.password = []
      },

      // 获取银行卡信息
      getBankInfor(index) {
        this.bank_card_id = this.$refs.menuId[index].innerText;
        this.bank_name = this.$refs.menuName[index].innerText;
        this.card_img = this.$refs.menuImg[index].src
        this.bank_code = this.$refs.menuCode[index].innerText
        console.log(this.bank_card_id);
        console.log(this.bank_name);
        console.log(this.card_img);
        console.log(this.bank_code);
        this.bindBank = false
        this.tixianInput = true
      },
      // 关闭银行弹窗
      closeInfor() {
        this.tixianInput = false
      },
      getBankList() {
        this.bindBank = true
      },
      // 添加银行卡
      addBandCard() {
        this.$router.push({path: '/eight'})
      },
      iKnow() {
        this.allTanchuang = false
      },
      // 忘记交易密码
      forgetNUM() {
        this.$router.push({path: '/resetpaynum'})
      },
      meiqihuankuan() {
        this.allTanchuang = true
      },
      changeColor(index) {
        this.changeRed = index;
      },
      getQuickMoney(index) {
        // 点击显示当前的金额
        console.log(this.$refs.menuItem[index].innerText);
        this.audit_amount = parseInt(this.$refs.menuItem[index].innerText);
        this.meiqihuankuanjine = (parseInt(this.audit_amount / 1) + parseFloat(this.audit_amount * 12 / 100));
        this.fuwufei = (parseFloat(this.audit_amount * 12 / 100));
        this.fenqijine = (parseInt(this.audit_amount / 1))
        this.diyizhou = (parseInt(this.audit_amount / 1) + parseFloat(this.audit_amount * 12 / 100));
      },
      jianMoney() {
        var oldValue = parseInt(this.audit_amount); //取出现在的值，并使用parseInt转为int类型数据
        // console.log(oldValue);
        if (this.audit_amount == 0) {
          oldValue = 0
        } else {
          oldValue -= 100;   //自减100
          if (oldValue <= 500) {
            oldValue = 500;
          }
        }
        // console.log(oldValue);
        this.audit_amount = (oldValue);  //将减少后的值付给控件;
        this.meiqihuankuanjine = (parseInt(this.audit_amount / 1) + parseFloat(this.audit_amount * 12 / 100));
        this.fuwufei = (parseFloat(this.audit_amount * 12 / 100));
        this.fenqijine = (parseInt(this.audit_amount / 1))
        this.diyizhou = (parseInt(this.audit_amount / 1) + parseFloat(this.audit_amount * 12 / 100));

      },
      addMoney() {
        var that = this;
        var oldValue = parseInt(that.audit_amount); //取出现在的值，并使用parseInt转为int类型数据
        // console.log(oldValue);
        if (that.audit_amount == 0) {
          oldValue = 0
        } else {
          oldValue += 100;   //自加100
          if (oldValue > that.indexLimit) {
            oldValue = that.indexLimit;
          }
        }
        // console.log(oldValue);
        that.audit_amount = (oldValue);  //将减少后的值付给控件;
        that.meiqihuankuanjine = (parseInt(that.audit_amount / 1) + parseFloat(that.audit_amount * 12 / 100));
        that.fuwufei = (parseFloat(that.audit_amount * 12 / 100));
        that.fenqijine = (parseInt(that.audit_amount / 1))
        that.diyizhou = (parseInt(that.audit_amount / 1) + parseFloat(that.audit_amount * 12 / 100));
      },
      jiekuanyongtu() {
        this.jiekuanyongtutanchuang = true;
        this.valueWrap = true
      },
      remove() {
        this.jiekuanyongtutanchuang = false;
        this.valueWrap = false
      },
      getValue(index) {
        console.log(this.$refs.getvalue[index].innerText);
        this.getvalue = this.$refs.getvalue[index].innerText
        this.jiekuanyongtutanchuang = false
        this.valueWrap = false
      },
      checkStatus() {
        console.log(this.status)
      },
      clickIndexBtn() {
        // 首先判断是否选择借款用途,再判断是否同意协议，两者均满足才可提现
        if (!this.getvalue) {
          this.tishiShow = true;
          this.tishiInfor = '请选择借款用途';
          var _that = this;
          window.setTimeout(function () {
            _that.tishiShow = false
          }, 1500);
        } else {
          if (this.status == false) {
            this.tishiShow = true;
            this.tishiInfor = '请阅读并同意协议';
            var that = this
            window.setTimeout(function () {
              that.tishiShow = false
            }, 1500);
          } else {
            var that = this;
            that.tishiShow = false;
            // 正式开始提现
            console.log('提现')
            // 前置判断
            axios.post('http://test.zjapi.xianxiangle.com/user/credit_verify', {AuthToken: that.AuthTokenIndex}).then(function (res) {
              console.log(res.data.data)
              that.is_credit = res.data.data.is_credit;
              //是否有设备检测
              // var is_device = res.data.is_device;
              //是否设置支付密码
              that.is_pay_pwd = res.data.data.is_pay_pwd;
              // 是否绑定银行卡
              that.is_bank = res.data.data.is_bank;
              // console.log(is_bank)
              that.is_address = res.data.data.is_address;

              // 认证信用
              if (that.is_credit == 0) {
                console.log('去认证');
                that.isRenzhengWrap0=true;
                // 检测地址
              } else
              if (that.is_address == 0) {
                console.log('去认证地址');
                that.isRenzhengWrapId = true;
                // 检测银行卡
              } else if (that.is_bank == '0') {
                console.log('绑定银行卡');
                that.isRenzhengbankCardWrap = true;
                // 检测交易密码
              } else if (that.is_pay_pwd == "0") {
                console.log('设置交易密码');
                that.isRenzhengjiaoyiWrap = true;
              } else if (that.audit_amount == 0 || that.audit_amount < 500) {
                that.tishiShow = true;
                that.tishiInfor = '分期金额最低500元';
                window.setTimeout(function () {
                  that.tishiShow = false
                }, 1500);
              } else {
                that.tixianInput = true
              }
            }).catch(function () {

            })
          }
        }
      },
      // 信息认证
      renzhengxinxiquxiao() {
        var that = this;
        that.isRenzhengWrap0 = false;
      },

      // 此处调原生方法
      quRenzhengxinxi() {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // 调原生认证
        if (isiOS) {
          window.webkit.messageHandlers.renzhengMethod.postMessage(null);
        } else {
          AndroidJs.renzhengMethod();
        }
      },

      // 地址认证
      renzhengAdderssquxiao() {
        var that = this;
        that.isRenzhengWrapId = false;
      },
      renzhengAddress() {
        var that = this;
        that.$router.push({path: '/second'})
      },
      // 设置交易密码
      renzhengJiaoyimimaquxiao() {
        var that = this;
        that.isRenzhengjiaoyiWrap = false;
      },
      setJiaoyimima() {
        var that = this;
        that.$router.push({path: '/setpaynum'})
      },
      // 绑定银行卡
      quxiaoBindBankCard() {
        var that = this;
        that.isRenzhengbankCardWrap = false;
      },
      other() {
        var that = this;
        // that.tixianInput = true;
        that.$router.push({path: '/second'})


      },
      BindBankCard() {
        var that = this;
        that.bindBank = true
      }
    },
    created() {
      var that = this;
      that.AuthTokenIndex = sessionStorage.getItem('AuthToken');
      console.log(that.AuthTokenIndex);
      if (that.AuthTokenIndex == null) {
        that.$router.push({path: '/nine'})
      } else {
        // 判断设备信息
        //判断数组中是否包含某字符串
        Array.prototype.contains = function (needle) {
          for (i in this) {
            if (this[i].indexOf(needle) > 0)
              return i;
          }
          return -1;
        }

        var device_type = navigator.userAgent;//获取userAgent信息
        // document.write(device_type);//打印到页面
        var md = new MobileDetect(device_type);//初始化mobile-detect
        var os = md.os();//获取系统
        var model = "";
        if (os == "iOS") {//ios系统的处理
          os = md.os() + md.version("iPhone");
          model = md.mobile();
        } else if (os == "AndroidOS") {//Android系统的处理
          os = md.os() + md.version("Android");
          var sss = device_type.split(";");
          var i = sss.contains("Build/");
          if (i > -1) {
            model = sss[i].substring(0, sss[i].indexOf("Build/"));
          }
        }
        // console.log(model);//打印系统版本和手机型号
        that.phoneModel = model;
        console.log(that.phoneModel);


        // 展示银行卡列表
        axios.get('http://test.zjapi.xianxiangle.com/user/bank_card_list?AuthToken=' + that.AuthTokenIndex,).then(function (res) {
          that.bankArr.push(res.data.data);
          console.log(res.data.data)
          console.log(res.data.data[0]);
          that.bank_card_id=res.data.data[0].bank_card_id;
          that.bank_name=res.data.data[0].bank_name;
          that.bank_code=res.data.data[0].bank_code;
          that.card_img=res.data.data[0].card_img;
        }).catch(function (err) {
        })
      }
      // 申请临时额度开关
      axios.get('http://test.zjapi.xianxiangle.com/temp_credit_switch?AuthToken=' + that.AuthTokenIndex).then(function (res) {
        console.log(res.data.data.status);
        that.applystatus=res.data.data.status;
        // 开关状态
        if(that.applystatus==0){
          that.limitShow=false
        }else {
          that.limitShow=true
        }
      }).catch(function (err) {

      })
    },
    mounted() {
      var that = this;
      // 请求cash_show数据
      axios.get('http://test.zjapi.xianxiangle.com/cash_show?AuthToken=' + that.AuthTokenIndex,).then(function (res) {
        console.log(res.data);
        console.log(res.data.data);
        var indexData = res.data.data
        that.audit_amount = indexData.audit_amount;
        // $('#fuwufei').html(parseFloat(audit_amount * 12 / 100));
        that.meiqihuankuanjine = (parseInt(that.audit_amount / 1) + parseFloat(that.audit_amount * 12 / 100));
        that.fuwufei = (parseFloat(that.audit_amount * 12 / 100));
        that.fenqijine = (parseInt(that.audit_amount / 1))
        that.diyizhou = (parseInt(that.audit_amount / 1) + parseFloat(that.audit_amount * 12 / 100));
        that.purpose.push(indexData.purpose);
        that.quick_choice.push(indexData.quick_choice);
        console.log(that.purpose);
        console.log(that.quick_choice);
        console.log(that.quick_choice[0][3]);
        that.indexLimit=that.quick_choice[0][3]

        that.types.push(indexData.credit_config);
        console.log(indexData.credit_config)
        var types = indexData.credit_config;
        for (var i = 0; i < types.length; i++) {
          // console.log(types[i].type);
          for (var j = 0; j < types[i].type.length; j++) {
            // // 周
            console.log(types[i].type[j].name);
            // week
            // console.log(types[i].type[j].value);
            // 还款日期
            that.arriveTime = types[i].type[j].first_deadline
            // that.arriveTime=(arriveTime)
            // console.log(types[i].type[j].period)
            for (var a = 0; a < types[i].type[j].period.length; a++) {
              // console.log(types[i].type[j].period[a].name);
              that.periodTime = types[i].type[j].period[a].name;
              that.fenqitype = types[i].type[j].value;
              // 1周
              console.log(that.periodTime)
              // week
              console.log(that.fenqitype)

              // $('#periodTime').html(periodTime);
            }
            for (var k = 0; k < types[i].type[j].period.length; k++) {
              console.log(types[i].type[j].period[k].name);
              // 一周
              that.typeTime = (types[i].type[j].period[k].name);
              that.typeValue = parseInt(types[i].type[j].period[k].value);
              // console.log(that.typeTime);
              // 1
              // console.log(that.typeValue);
            }
          }
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
  }
</script>

<style lang="scss" scoped>
  .homeBox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: #eee;
  }

  //分期明细 div
  #big_zhezhao {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    //padding-top: 6rem;
    left: 0;
    top: 0;
    z-index: 999;
    /*display: none;*/
    .fenqimingxi {
      width: 86%;
      height: 70%;
      background: white;
      //border-radius: 2rem;
      margin: auto;
      margin-top: 8rem;
      /*//border: 1px solid;*/
      position: relative;
      //display: none;
      .iknow {
        width: 100%;
        text-align: center;
        height: 5rem;
        /*//border: 1px solid;*/
        position: absolute;
        bottom: 2rem;
        left: 0;
        button {
          width: 90%;
          height: 4rem;
          line-height: 4rem;
          background: #32D69C;
          color: white;
          font-size: 1.6rem;
          text-align: center;
          border-radius: 0.2rem;
          outline: none;
          border: 0;

        }
      }
      .fenqimingxi_top {
        width: 100%;
        //border: 1px solid;
        p {
          width: 80%;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          padding: 1rem;
          font-size: 2rem;
          border-bottom: 1px solid #eeeeee;
          margin: auto;
        }
      }
      .topUls {
        width: 90%;
        list-style: none;
        border-bottom: 1px solid #eeeeee;
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-around;
        margin: auto;
        padding: 0.5rem;
        li {
          width: 100%;
          //height: 5rem;
          //border: 1px solid;
          text-align: center;
          p:nth-child(1) {
            color: #ccc;
            font-size: 2rem;
          }
          p:nth-child(2) {
            color: #ff9d00;
            font-size: 2rem;
          }
        }
      }
      .fenqimingxiList {
        width: 90%;
        margin: auto;
        font-size: 2rem;
        font-weight: 200;
        ul {
          width: 100%;
          //border: 1px solid;
          padding-top: 1rem;
          list-style: none;
          li:nth-child(1) {
            font-size: 2rem;
            //font-weight: 200;
            color: #666666;
          }
          li {
            width: 100%;
            //height: 5rem;
            margin-top: 1rem;
            display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
            display: -moz-box; /* 老版本语法: Firefox (buggy) */
            display: -ms-flexbox; /* 混合版本语法: IE 10 */
            display: -webkit-flex; /* 新版本语法: Chrome 21+ */
            display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
            justify-content: space-between;
            font-size: 2rem;
          }
        }
      }
    }
  }

  //借款用途
  #jiekuanyongtu {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    padding-top: 6rem;
    left: 0;
    top: 0;
    z-index: 999;
    /*display: none;*/
    //overflow: hidden;
    //两者一体
    .valueWrap {
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 8rem;
      margin: auto;
      /*display: none;*/
      .fenqimingxi {
        width: 86%;
        //height: 50%;
        background: white;
        border-radius: 1rem;
        margin: auto;
        //margin-top: 14rem;
        //position: absolute;
        .fenqimingxiListzuoyong {
          width: 90%;
          margin: auto;
          //display: none;
          ul {
            width: 100%;
            padding-top: 1rem;
            padding-bottom: 1rem;
            list-style: none;
            font-size: 1.6rem;
            font-weight: 300;
            li {
              width: 90%;
              height: 5rem;
              line-height: 5rem;
              //margin-top: 0.2rem;
              text-align: left;
              font-size: 1.6rem;
              border-bottom: 1px solid #ccc;
              margin: auto;
            }
            li:nth-last-child(1) {
              border-bottom: 0;
            }
          }
        }
      }
      .quxiaoUls {
        width: 100%;
        margin: auto;
        color: #666666;
        //display: none;
        ul {
          width: 86%;
          font-size: 2rem;
          text-align: center;
          border-radius: 1rem;
          background: white;
          border: 1px solid #CCCCCC;
          list-style: none;
          margin: auto;
          margin-top: 1rem;
          color: black;
          li {
            width: 100%;
            height: 4.2rem;
            line-height: 4.2rem;
            font-size: 1.8rem;
            color: black;
          }
        }
      }

    }
    #jiekuanyongtu_middle {
      width: 100%;
      margin: auto;
    }

  }

  //认证信息
  .isRenzhengWrap0 {
    width: 100%;
    //border: 1px solid;
    position: absolute;
    bottom: 24rem;
    margin: auto;
    /*display: none;*/
    border: 0;
    .isRenzheng0 {
      width: 70%;
      height: 12rem;
      border: 1px solid #CCCCCC;
      border: 0;
      border-radius: 1.6rem;
      background: #f3f3f3;
      margin: auto;
      p {
        font-size: 1.8rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        padding: 0rem 1rem 0 1rem;
        position: relative;
        top: 1rem;
      }
      ul {
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-around;
        //border: 1px solid;
        list-style: none;
        margin-top: 4rem;
        li:nth-child(1) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-radius: 0 0 0 1.6rem;
          color: #528CE0;

        }
        li:nth-child(2) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-radius: 0 0 1.6rem 0;
          color: #528CE0;
        }
      }
    }
  }

  //认证地址
  .isRenzhengWrapId {
    width: 100%;
    //border: 1px solid;
    position: absolute;
    border: 0;

    bottom: 24rem;
    margin: auto;
    /*display: none;*/
    .isRenzhengId {
      width: 70%;
      height: 12rem;
      border: 1px solid #CCCCCC;
      border: 0;
      border-radius: 1.6rem;
      background: #f3f3f3;
      margin: auto;
      p {
        font-size: 1.8rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        padding: 0rem 1rem 0 1rem;
        position: relative;
        top: 1rem;
      }
      ul {
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-around;
        //border: 1px solid;
        list-style: none;
        margin-top: 4rem;
        li:nth-child(1) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-radius: 0 0 0 1.6rem;
          color: #528CE0;

        }
        li:nth-child(2) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-radius: 0 0 1.6rem 0;
          color: #528CE0;
        }
      }
    }
  }

  //设置交易密码
  .isRenzhengjiaoyiWrap {
    width: 100%;
    //border: 1px solid;
    position: absolute;
    bottom: 24rem;
    border: 0;
    margin: auto;
    /*display: none;*/
    .isRenzhengjiaoyi {
      width: 70%;
      height: 12rem;
      border: 1px solid #CCCCCC;
      border: 0;
      border-radius: 1.6rem;
      background: #f3f3f3;
      margin: auto;
      p {
        font-size: 2rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        padding: 0rem 1rem 0 1rem;
        position: relative;
        top: 1rem;
      }
      ul {
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-around;
        //border: 1px solid;
        list-style: none;
        margin-top: 4rem;
        li:nth-child(1) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-radius: 0 0 0 1.6rem;
          color: #528CE0;

        }
        li:nth-child(2) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-radius: 0 0 1.6rem 0;
          color: #528CE0;
        }
      }
    }
  }

  //绑定银行卡
  .isRenzhengbankCardWrap {
    width: 100%;
    //border: 1px solid;
    position: absolute;
    bottom: 24rem;
    border: 0;
    margin: auto;
    /*display: none;*/
    .isRenzhengbankCard {
      width: 70%;
      height: 12rem;
      border: 1px solid #CCCCCC;
      border-radius: 1.6rem;
      background: #f3f3f3;
      border: 0;
      margin: auto;
      p {
        font-size: 2rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        padding: 0rem 1rem 0 1rem;
        position: relative;
        top: 1rem;
      }
      ul {
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-around;
        //border: 1px solid;
        list-style: none;
        margin-top: 4rem;
        li:nth-child(1) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-radius: 0 0 0 1.6rem;
          color: #528CE0;

        }
        li:nth-child(2) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-radius: 0 0 1.6rem 0;
          color: #528CE0;
        }
      }
    }
  }


  //交易密码错误
  .payWrongWrap {
    width: 100%;
    //border: 1px solid;
    position: absolute;
    bottom: 24rem;
    border: 0;
    margin: auto;
    display: none;
    .payWrong {
      width: 70%;
      height: 12rem;
      border: 0;
      border-radius: 1.6rem;
      background: #f3f3f3;
      margin: auto;
      p {
        font-size: 2rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        padding: 0rem 1rem 0 1rem;
        position: relative;
        top: 1rem;
      }
      ul {
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-around;
        //border: 1px solid;
        list-style: none;
        margin-top: 4rem;
        li:nth-child(1) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-radius: 0 0 0 1.6rem;

        }
        li:nth-child(2) {
          width: 50%;
          text-align: center;
          font-size: 2rem;
          height: 5rem;
          line-height: 5rem;
          border-top: 1px solid #ccc;
          border-radius: 0 0 1.6rem 0;
        }
      }
    }
  }

  .code2007 {
    width: 100%;
    //border: 1px solid;
    position: absolute;
    bottom: 24rem;
    margin: auto;
    display: none;
    .code200702 {
      width: 70%;
      height: 12rem;
      border: 0;
      border-radius: 1.6rem;
      background: #f3f3f3;
      position: relative;
      margin: auto;
      p {
        font-size: 2rem;
        height: 5rem;
        line-height: 5rem;
        text-align: center;
        padding: 0rem 1rem 0 1rem;
        position: relative;
        top: 1rem;
      }
      ul {
        list-style: none;
        li {
          text-align: center;
          border-top: 1px solid #CCCCCC;
          font-size: 2rem;
          width: 100%;
          height: 5rem;
          line-height: 5rem;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }

    }
  }

  .moneyLimit {
    width: 100%;
    border: 0;
    position: absolute;
    bottom: 24rem;
    margin: auto;
    display: none;
    .moneylimit {
      width: 70%;
      height: 10rem;
      //border: 1px solid #666666;
      border-radius: 1.6rem;
      background: #cccccc;
      position: relative;
      margin: auto;
      p {
        font-size: 2rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        padding: 0rem 1rem 0 1rem;
        position: relative;
        top: 1rem;
      }
      ul {
        list-style: none;
        li {
          text-align: center;
          border-top: 1px solid #666666;
          font-size: 2rem;
          width: 100%;
          height: 4rem;
          line-height: 4rem;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }

    }
  }

  #shouye {
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .shouyeTop {
    width: 100%;
    height: auto;
    //height: 24rem;
    background: #33D6B1;
    padding-bottom: 5rem;
    .bgImg {
      width: 100%;
      //height: 20rem;
      /*//border: 1px solid;*/
      position: relative;
      text-align: center;
      margin-top: 2rem;
      //background: url("../assets/yuanbeijing2.png");
      .bgImg_imgs {
        width: 100%;
        /*//border: 1px solid;*/
        //position: relative;
        //margin-top: 2rem;
        img:nth-child(1) {
          width: 60%;
          //height: 80%;
          height: auto;
        }
      }
      .jindujine {
        /*//border: 1px solid red;*/
        text-align: center; /*让div内部文字居中*/
        width: 12rem;
        height: 8rem;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        p:nth-child(1) {
          width: 100%;
          height: 3rem;
          font-size: 1.4rem;
          color: #ffffff;
          //border: 1px solid;
        }
        p:nth-child(2) {
          width: 100%;
          height: 5rem;
          line-height: 5rem;
          font-size: 3rem;
          text-align: center;
          position: relative;
          top: -1rem;
          //border: 1px solid;
          color: white;
        }
      }

      .jiajian {
        width: 90%;
        height: 5rem;
        position: relative;
        bottom: 1.5rem;
        //margin-top: -2rem;
        //background: red;
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-around;
        justify-items: center;
        align-items: center;
        margin: auto;
        img {
          width: 2.6rem;
          height: 2.6rem;
        }
        img:nth-child(1) {
          position: relative;
          right:2rem ;
        }
        img:nth-child(3) {
          position: relative;
          left: 2rem;
        }
        button {
          width: 12rem;
          height: 2.6rem;
          line-height: 1.6rem;
          border: 1px solid white;
          color: #25DDB4;
          font-size: 1.6rem;
          border-radius: 2rem;
          text-align: center;
          background-color: white;
          outline: none;
          padding: 0.5rem;
        }
      }
    }
    .titles {
      width: 100%;
      height: 4rem;
      line-height: 4rem;
      text-align: center;
      //border: 1px solid;
      p {
        color: white;
        font-size: 2.2rem;
        text-align: center;
        font-family: "微软雅黑";
        //border: 1px solid;
      }
    }
  }

  .kuaijiexuanze {
    width: 100%;
    height: 24rem;
    background: white;
    margin-top: -6rem;
    border-radius: 2rem 2rem 0 0;
    .borwer {
      width: 100%;
      p:nth-child(1) {
        width: 100%;
        //border: 1px solid;
        height: 4rem;
        line-height: 4rem;
        //padding-left:2rem;

        margin: auto;
        text-align: center;
        span {
          width: 85%;
          font-size: 1.4rem;
          //border: 1px solid;
          margin: auto;
          text-align: left;
        }
        //font-family: "黑体";
        //font-weight: 700;
      }
    }

    .kuaijiexuanze_jie {
      width: 90%;
      height: 3rem;
      //border: 1px solid;
      display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
      display: -moz-box; /* 老版本语法: Firefox (buggy) */
      display: -ms-flexbox; /* 混合版本语法: IE 10 */
      display: -webkit-flex; /* 新版本语法: Chrome 21+ */
      display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
      //justify-content: start;
      list-style: none;
      //margin-bottom: 1rem;
      margin: auto;
      position: relative;
      right: 0.6rem;
      .changes {
        font-size: 1.8rem;
        text-align: center;
        width: 7rem;
        height: 3.2rem;
        line-height: 3rem;
        /*border: 1px solid #ccc;*/
        /*color: #999999;*/
        border-radius: 0.5rem;
        margin-left: 1rem;
        color: #000;
        border: 1px solid #32D69C;
      }
      li {
        font-size: 1.8rem;
        text-align: center;
        width: 7rem;
        height: 3.2rem;
        line-height: 3rem;
        border: 1px solid #ccc;
        color: #999999;
        border-radius: 0.5rem;
        margin-left: 1rem;
        //padding:  0.2rem 1rem 0.2rem 1rem;
      }
    }
    .kuaijiexuanze_server {
      width: 90%;
      height: auto;
      //height: 12rem;
      //border-bottom: 1px solid #CCCCCC;
      background: #fff;
      list-style: none;
      //font-weight: 200;
      margin: auto;
      margin-top: 2rem;
      li {
        width: 100%;
        height: 5rem;
        line-height: 5rem;
        font-size: 1.4rem;
        //font-weight: 200;
        display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box; /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox; /* 混合版本语法: IE 10 */
        display: -webkit-flex; /* 新版本语法: Chrome 21+ */
        display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
        justify-content: space-between;
        p {
          width: auto;
          //font-weight: 700;
          margin-left: 0.5rem;
          //font-size: 1.4rem;
          color: #333333;
          letter-spacing: 0;
          //font-family: "黑体";
          font-family: PingFangSC-Regular;
        }
        span {
          //font-size: 1.4rem;
          margin-right: 1rem;
          font-family: PingFangSC-Regular;
          color: #666666;
          letter-spacing: 0;
          text-align: right;
          display: inline-block;
          img {
            //display: inline-block;
            //margin-left: 1.6rem;
            position: relative;
            top: 0.2rem;
          }
        }
      }
    }
    .kuaijiexuanze_xieyi {
      width: 100%;
      font-size: 1.4rem;
      text-align: left;
      //padding-top: 1rem;
      p {
        width: 90%;
        height: 3.6rem;
        line-height: 3.6rem;
        padding: 0.5rem 0 1rem 1.5rem;
        font-family: PingFangSC-Regular;
        //font-size: 24px;
        font-size: 1.4rem;
        color: #999999;
        letter-spacing: 0;
        margin: auto;
        input {
          width: 2rem;
          height: 2rem;
          margin-right: 0.6rem;
          position: relative;
          //background: #32D69C;
          background-color: #32D69C;
          //-webkit-appearance:none;
          border-radius: 1rem;
          top: 0.4rem;
          outline: none;
          border: 0;
        }
        a {
          color: #32D69C;
          font-size: 1.4rem;
          &:link {
            color: #32D69C;
            font-size: 1.4rem;
          }
          &:active {
            color: #32D69C;
            font-size: 1.4rem;
          }
          &:hover {
            color: #32D69C;
            font-size: 1.4rem;
          }
          &:visited {
            color: #32D69C;
            font-size: 1.4rem;
          }
        }
      }
    }
    .kuaijiexuanze_button {
      width: 100%;
      text-align: center;
      background: #eeeeee;
      //position: fixed;
      //bottom: 1rem;
      button {
        width: 90%;
        height: 4.4rem;
        line-height: 4.4rem;
        text-align: center;
        font-size: 1.6rem;
        background: #32D69C;
        border-radius: 0.5rem;
        font-weight: 300;
        outline: none;
        border: 0;
        font-family: PingFangSC-Regular;
        color: #FFFFFF;
        letter-spacing: 0;
      }
    }
  }

  #returnValue {
    width: 100%;
    height: 8rem;
    border: 1px solid;
    position: absolute;
    bottom: 0;
    top: 0;
    background: red;
    color: white;
    font-size: 1.6rem;
  }

  .bankInforWraps {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    /*display: none;*/
  }

  //提现密码 大div
  #tixianNumber {
    width: 100%;
    height: auto;
    /*height: 24rem;*/
    background: white;
    padding-bottom: 2rem;
    //border-radius: 0.5rem;
    position: fixed;
    bottom: 0rem;
    margin: auto;
    .inputBoxContainer {
      width: 90%;
      height: 5rem;
      position: relative;
      margin: 0 auto;
      .realInput {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        border: none;
        border-right: #eeeeee 1px solid;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0;
        margin: auto;
      }
      .bogusInput {
        width: 100%;
        height: 100%;
        border: #eeeeee 1px solid;
        /*border-radius: 7px;*/
        /*-moz-border-radius: 7px;*/
        /*-webkit-border-radius: 7px;*/
        overflow: hidden;
        position: absolute;
        z-index: 0;
      }
    }

    .inputBoxContainer .bogusInput input {
      padding: 0;
      width: 16.4%;
      height: 100%;
      float: left;
      background: #ffffff;
      text-align: center;
      font-size: 2rem;
      border: none;
      border-right: #eeeeee 1px solid;
      //color:transparent;
    }
    .inputBoxContainer .bogusInput input:last-child {
      border: none;
    }
    .tixianBankInfor {
      width: 100%;
      height: 10rem;
      background: white;
      //margin-bottom: 1rem;
      p:nth-child(1) {
        height: 2rem;
        line-height: 2rem;
        padding: 1rem;
        text-align: left;
        padding-left: 2rem;
        //border: 1px solid;
        font-size: 2rem;
        overflow: hidden;
      }
      .tixianBankInfor_infor {
        width: 100%;
        div {
          height: 5rem;
          line-height: 5rem;
          overflow: hidden;
          /*display: -webkit-box; !* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. *!*/
          /*display: -moz-box; !* 老版本语法: Firefox (buggy) *!*/
          /*display: -ms-flexbox; !* 混合版本语法: IE 10 *!*/
          /*display: -webkit-flex; !* 新版本语法: Chrome 21+ *!*/
          /*display: flex; !* 新版本语法: Opera 12.1, Firefox 22+ *!*/
          /*justify-content: start;*/
          input {
            width: 1.6rem;
            height: 1.6rem;
            margin-top: 1.7rem;
            margin-left: 2rem;
            float: left;
          }
          img {
            width: 2.8rem;
            height: 2.8rem;
            margin-top: 1.2rem;
            margin-right: 0.5rem;
            margin-left: 1rem;
            float: left;
          }
          p {
            span {
              display: inline-block;
              margin-left: 0.5rem;
              font-size: 1.6rem;
              float: left;
            }
          }
        }
      }
    }
    //请输入交易密码
    .content {
      width: 100%;
      height: 4rem;
      line-height: 4rem;
      font-size: 2rem;
      text-align: left;
      padding-left: 2rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      //font-size: 1rem;
      color: #333333;
      overflow: hidden;
      span {
        display: inline-block;
        float: right;
        margin-right: 4rem;
        font-size: 4rem;
      }

    }
    .showValue {
      width: 240px;
      height: 22px;
      line-height: 22px;
      font-size: 16px;
      text-align: center;
      margin: 0 auto;
      display: none;
    }
    .forgetNum {
      width: 100%;
      background: white;
      margin-top: 1rem;
      overflow: hidden;

      p {
        width: 40%;
        background: white;
        margin-right: 1rem;
        font-size: 1.6rem;
        color: #32D69C;
        float: right;
        text-align: right;
      }
    }
  }

  .tishiAgree {
    width: 100%;
    /*display: none;*/
    margin: auto;
    p {
      width: 70%;
      background: rgba(0, 0, 0, 0.4);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff, endColorstr=#66ffffff);
      border-radius: 0.3rem;
      color: white;
      padding: 0.5rem;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
      font-size: 1.6rem;
      margin: auto;
    }
  }

  #bindBank {
    width: 100%;
    height: 100%;
    background: white;
    margin: auto;
    padding-bottom: 2rem;
    position: absolute;
    left: 0;
    top: 0;
    /*display: none;*/
    .backWrap {
      width: 100%;
      margin: auto;
      //text-align: center;
      position: relative;
      //border: 1px solid;
      .bankImg {
        width: 100%;
        margin: auto;
        //border: 1px solid;
        img {
          width: 100%;
          height: auto;
        }
      }
      .bankInfors {
        width: 100%;
        margin: auto;
        padding-bottom: 0.8rem;
        ul {
          width: 94%;
          height: 10rem;
          list-style: none;
          margin: auto;
          color: white;
          text-align: left;
          //border-bottom: 1px solid;
          border: 1px solid;
          padding-bottom: 1rem;
          border-radius: 0.5rem;
          background: rgba(90, 136, 227, 1);
          //padding: 1rem;
          margin-top: 0.6rem;
          overflow: hidden;
          li:nth-child(1) {
            /*width: 80%;*/
            height: 4rem;
            line-height: 4rem;
            display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
            display: -moz-box; /* 老版本语法: Firefox (buggy) */
            display: -ms-flexbox; /* 混合版本语法: IE 10 */
            display: -webkit-flex; /* 新版本语法: Chrome 21+ */
            display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
            justify-content: start;
            /*text-align: center;*/
            margin: auto;
            //border: 1px solid;
            img {
              width: 2rem;
              height: 2rem;
              position: relative;
              left: 1rem;
              /*top: 1.2rem;*/
              /*margin-left: 0.5rem;*/
            }
            p {
              font-size: 2rem;
            }
            span {
              font-size: 1rem;
              /*position: absolute;*/
              /*right: 1rem;*/
            }
          }
          li:nth-child(2) {
            width: 100%;
            height: 5rem;
            line-height: 5rem;
            margin-left: 0.5rem;
            //border: 1px solid;
            /*text-align: center;*/
            p {
              width: 90%;
              text-align: center;
              font-size: 2.6rem;
            }
          }
        }
      }
      .bankAdd {
        width: 100%;
        //border: 1px solid;
        text-align: center;
        margin: auto;
        //margin-top: 10rem;
        position: absolute;
        img {
          width: 94%;
          height: auto;
          margin: auto;
        }
      }
    }
  }

  #bgs {
    width: 100%;
    height: auto;
    /*background: #cccccc;*/
  }

  .tishiAgree {
    width: 100%;
    /*display: none;*/
    margin: auto;
    p {
      width: 50%;
      background: rgba(0, 0, 0, 0.4);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff, endColorstr=#66ffffff);
      border-radius: 0.3rem;
      color: white;
      padding: 0.5rem;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
      font-size: 1.6rem;
      margin: auto;
    }
  }

  .pay-tool {
    position: relative;
    height: auto;
    background-color: #fff;
    overflow: hidden;
    /*border: 1px solid;*/
    &-title {
      width: 100%;
      height: 2.08888888rem;
      padding: 0 0.8rem;
      line-height: 2.08888888rem;
      text-align: center;
      overflow: hidden;
      .icon {
        float: left;
        margin-top: 0.72222222rem;
      }
      strong {
        font-size: 0.8rem;
      }
    }
    &-content {
      .pay-tool-inputs {
        width: 20rem;
        height: 4rem;
        margin: 1.28888888rem auto 0;
        /*border: 1px solid #b9b9b9;*/
        border-radius: 0.26666666rem;
        box-shadow: 0 0 1px #e6e6e6;
        display: flex;
        .item {
          width: 16.66666666%;
          height: 2.31111111rem;
          border-right: 1px solid #eeeeee;
          line-height: 2.31111111rem;
          text-align: center;
          &:last-child {
            border-right: none;
          }
          .icon_dot {
            display: inline-block;
            width: 0.51111111rem;
            height: 0.51111111rem;
            background: url("../assets/i7_detail_16g@2x_01.png") no-repeat;
            background-size: cover;
          }
        }
      }
    }
    .pay-tool-keyboard {
      /*position: absolute;*/
      /*left: 0;*/
      /*bottom: 0;*/
      width: 100%;
      height: auto;
      text-align: center;
      margin: auto;
      ul {
        width: 60%;
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        text-align: center;
        margin: auto;
        margin-top: 2rem;
        /*border: 1px solid red;*/
        li {
          width: 26%;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          /*border-right: 1px solid #aeaeae;*/
          /*border-bottom: 1px solid #aeaeae;*/
          border: 1px solid #eeeeee;
          font-size: 0.8rem;
          font-weight: bold;
          margin: auto;
          margin-top: 0.2rem;
          /*margin: 0.1rem;*/

          &:nth-child(10), &:nth-child(12), &:active {
            background-color: #d1d4dd;
          }
          &:nth-child(12):active {
            background-color: #fff;
          }
        }
      }
    }
  }


</style>
